<template>
  <div class="home">
    <!-- 使用通用导航栏 -->
    <Navbar />

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- Hero区域 -->
      <div class="hero-section">
        <div class="hero-content">
          <div class="hero-icon">
            <el-icon size="80"><Cpu /></el-icon>
          </div>
          <h1 class="main-title">PCB芯选印刷电路板商城</h1>
          <p class="subtitle">专业PCB采购平台，高品质电路板一站式选购</p>
          
          <!-- 统计数据 -->
          <div class="stats-section">
            <div class="stat-item">
              <div class="stat-number">10W+</div>
              <div class="stat-label">PCB型号</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">99.8%</div>
              <div class="stat-label">交付准时率</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">500+</div>
              <div class="stat-label">合作厂商</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">100%</div>
              <div class="stat-label">原厂正品</div>
            </div>
          </div>

          <!-- 功能介绍 -->
          <div class="features-section">
            <h2 class="section-title">专业PCB解决方案</h2>
            <div class="features-grid">
              <div class="feature-item">
                <el-icon class="feature-icon"><Cpu /></el-icon>
                <h3>海量库存</h3>
                <p>10万+型号现货供应，满足不同需求</p>
              </div>
              <div class="feature-item">
                <el-icon class="feature-icon"><Lock /></el-icon>
                <h3>品质保证</h3>
                <p>100%原厂正品，质量问题无条件退换</p>
              </div>
              <div class="feature-item">
                <el-icon class="feature-icon"><Lightning /></el-icon>
                <h3>快速交付</h3>
                <p>24小时内发货，99.8%准时交付率</p>
              </div>
              <div class="feature-item">
                <el-icon class="feature-icon"><Setting /></el-icon>
                <h3>技术支持</h3>
                <p>专业技术团队，提供完整解决方案</p>
              </div>
            </div>
          </div>

          <!-- 优势展示 -->
          <div class="advantages-section">
            <div class="advantage-item">
              <el-icon class="advantage-icon"><Checked /></el-icon>
              <span class="advantage-text">原厂正品保障</span>
            </div>
            <div class="advantage-item">
              <el-icon class="advantage-icon"><Lightning /></el-icon>
              <span class="advantage-text">极速交付体验</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门产品展示 -->
      <div class="hot-products-section">
        <h2 class="section-title hot-products-title">热门产品</h2>
        <div class="products-grid" v-loading="loading">
          <el-card 
            v-for="product in featuredProducts" 
            :key="product.productId"
            class="product-card"
            @click="viewProduct(product.productId)"
          >
            <div class="product-image">
              <el-icon size="80" class="product-icon"><Cpu /></el-icon>
            </div>
            <div class="product-info">
              <h4>{{ product.productName || '商品名称' }}</h4>
              <p class="product-specs">{{ product.specParams || '暂无规格信息' }}</p>
              <div class="product-price">
                <span class="price">¥{{ product.price || 0 }}</span>
                <span class="stock">库存: {{ product.stock || 0 }}</span>
              </div>
              <div class="product-actions">
                <el-button 
                  type="primary" 
                  size="small"
                  @click.stop="addToCart(product)"
                  :disabled="!product.stock"
                >
                  {{ product.stock > 0 ? '加入购物车' : '暂无库存' }}
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 底部栏 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <div class="company-info">
            <div class="footer-logo">
              <el-icon class="logo-icon"><Cpu /></el-icon>
              <span class="logo-text">PCB芯选</span>
            </div>
            <p class="company-desc">专业的PCB采购平台，为电子工程师提供高品质电路板一站式选购服务</p>
            <div class="contact-info">
              <p><el-icon><Phone /></el-icon> 400-888-8888</p>
              <p><el-icon><Message /></el-icon> service@pcbcsm.com</p>
            </div>
          </div>
        </div>
        
        <div class="footer-section">
          <h4>产品服务</h4>
          <ul class="footer-links">
            <li><a href="#" @click="$router.push('/products')">商品中心</a></li>
            <li><a href="#">定制服务</a></li>
            <li><a href="#">技术支持</a></li>
            <li><a href="#">样品申请</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>帮助中心</h4>
          <ul class="footer-links">
            <li><a href="#">购物指南</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">配送服务</a></li>
            <li><a href="#">售后服务</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>关于我们</h4>
          <ul class="footer-links">
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">发展历程</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">招聘信息</a></li>
          </ul>
        </div>
      </div>
      
      <div class="footer-bottom">
        <div class="footer-bottom-content">
          <p>&copy; 2024 PCB芯选. 保留所有权利.</p>
          <div class="footer-bottom-links">
            <a href="#">隐私政策</a>
            <a href="#">服务条款</a>
            <a href="#">网站地图</a>
          </div>
        </div>
      </div>
    </footer>

    <!-- 浮动购物车 -->
    <FloatingCart />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Cpu } from '@element-plus/icons-vue'
import { productAPI } from '@/api'
import Navbar from '@/components/Navbar.vue'
import FloatingCart from '@/components/FloatingCart.vue'

export default {
  name: 'HomeView',
  components: {
    Navbar,
    FloatingCart,
    Cpu
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const featuredProducts = ref([])
    const loading = ref(false)

    const viewProduct = (productId) => {
      router.push(`/product/${productId}`)
    }

    const fetchFeaturedProducts = async () => {
      try {
        loading.value = true
        // 获取库存最少的15个商品作为热门商品
        const response = await productAPI.getProductsByPage(0, 50) // 先获取更多商品
        let products = response.products || []
        
        // 确保products是数组
        if (!Array.isArray(products)) {
          console.warn('API返回的数据不是数组:', products)
          products = []
        }
        
        // 按库存从少到多排序，取前15个
        products = products
          .filter(product => product && product.stock && product.stock > 0) // 只显示有库存的商品
          .sort((a, b) => (a.stock || 0) - (b.stock || 0)) // 按库存从少到多排序
          .slice(0, 15) // 取前15个
        
        featuredProducts.value = products
      } catch (error) {
        console.error('获取热门商品失败:', error)
        ElMessage.error('获取热门商品失败')
        featuredProducts.value = []
      } finally {
        loading.value = false
      }
    }

    const addToCart = (product) => {
      store.dispatch('addProductToCart', {
        productId: product.productId,
        productName: product.productName,
        price: product.price,
        productImage: product.productImage,
        specParams: product.specParams,
        quantity: 1
      })
      ElMessage.success(`已将 ${product.productName} 加入购物车`)
    }

    onMounted(() => {
      fetchFeaturedProducts()
    })

    return {
      featuredProducts,
      loading,
      viewProduct,
      addToCart
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #ffffff;
}

/* 已移除内置header样式，使用通用Navbar组件 */

.main-content {
  padding: 0;
}

.hero-section {
  text-align: center;
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-icon {
  margin-bottom: 30px;
  color: #00D4FF;
}

.main-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 50px;
  color: #B0BEC5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.stats-section {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 30px 40px;
  min-width: 150px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  background: rgba(0, 212, 255, 0.2);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #00D4FF;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1rem;
  color: #B0BEC5;
}

.features-section {
  margin-bottom: 60px;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #00D4FF;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.feature-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  background: rgba(0, 212, 255, 0.2);
}

.feature-icon {
  font-size: 48px;
  color: #00D4FF;
  margin-bottom: 20px;
}

.feature-item h3 {
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 15px;
}

.feature-item p {
  color: #B0BEC5;
  font-size: 0.9rem;
  line-height: 1.5;
}

.advantages-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.advantage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 25px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.advantage-icon {
  font-size: 20px;
  color: #00D4FF;
}

.advantage-text {
  color: #B0BEC5;
}

.hot-products-section {
  background: rgba(0, 0, 0, 0.3);
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 20px;
  margin-bottom: 40px;
}

.hot-products-title {
  text-align: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.product-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.product-image {
  text-align: center;
  padding: 20px;
  color: #00D4FF;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-image img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.default-product-icon {
  color: #00D4FF;
}

.product-info {
  padding: 20px;
}

.product-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.product-specs {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00D4FF;
}

.stock {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.product-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-actions .el-button {
  width: 100%;
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.product-actions .el-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #4F46E5, #00D4FF);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.product-actions .el-button:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 底部栏样式 */
.footer {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 60px 20px 40px;
}

.footer-section h4 {
  color: #00D4FF;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.company-info .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.company-info .logo-icon {
  font-size: 28px;
  color: #00D4FF;
}

.company-info .logo-text {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.company-desc {
  color: #B0BEC5;
  line-height: 1.6;
  margin-bottom: 20px;
}

.contact-info p {
  color: #B0BEC5;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #B0BEC5;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #00D4FF;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
}

.footer-bottom-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: #B0BEC5;
  font-size: 0.9rem;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: #B0BEC5;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #00D4FF;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }
  
  .nav-menu {
    margin: 10px 0;
  }
  
  .user-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
  
  .stats-section {
    gap: 20px;
  }
  
  .stat-item {
    padding: 20px 30px;
    min-width: 120px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 20px 30px;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}
</style>
